// import { resolve } from "dns";

window.addEventListener('DOMContentLoaded', function(e) {

    var waterfall = new Waterfall({ minBoxWidth: 200 });

    // button click handle
    var btn = document.getElementById('add-btn');
    var boxHandle = newNode();
    btn.addEventListener('click', function() {

        waterfall.addBox(boxHandle());
    });

    var scaleUpbtn = document.getElementById('scaleup-btn');
    scaleUpbtn.addEventListener('click', function() {

        waterfall.minBoxWidth += 50;
        waterfall.compose(true);
    });

    var scaleDownbtn = document.getElementById('scaledown-btn');
    scaleDownbtn.addEventListener('click', function() {

        waterfall.minBoxWidth -= 50;
        waterfall.compose(true);
    });

    window.onscroll = function() {
        var i = waterfall.getHighestIndex();
        if(i > -1) {
            // get last box of the column
            var lastBox = Array.prototype.slice.call(waterfall.columns[i].children, -1)[0];
            if(checkSlide(lastBox)) {
                var count = 5;
                while(count--) waterfall.addBox(boxHandle());
            }
        }
    };

    function checkSlide(elem) {
        if(elem) {
            var screenHeight = (document.documentElement.scrollTop || document.body.scrollTop) +
                               (document.documentElement.clientHeight || document.body.clientHeight);
            var elemHeight = elem.offsetTop + elem.offsetHeight / 2;

            return elemHeight < screenHeight;
        }
    }

    // waterfall.addBox(boxHandle())
    function newNode(){
        fetch('http://coffee-alexa.gitee.io/lower-crawler/dist/imgListInfo.json')
        .then(function(response) {
            return response.json()
            // resolve
        })
        .then(function(myJson){
            // 0: {id: "994514", path: "c:\Users\AAAAALEX\Desktop\myCrawler\dist\994514.jpg", desc: "HD Wallpaper | Background Image "}           var wf = document.getElementsByClassName('wf-container')[0]
            myJson.map(function(item){
                var boxHandle = function newNode() {
                    var box = document.createElement('div');
                    box.className = 'wf-box';
                    var image = document.createElement('img');
                    image.src = item.path;
                    box.appendChild(image);
                    var content = document.createElement('div');
                    content.className = 'content';
                    var title = document.createElement('h3');
                    title.appendChild(document.createTextNode(item.id));
                    content.appendChild(title);
                    var p = document.createElement('p');
                    p.appendChild(document.createTextNode(item.desc));
                    content.appendChild(p);
                    box.appendChild(content);
                    return box;
                };
                waterfall.addBox(boxHandle())
            })
        })
    }
    newNode()
});
